@import './variables.scss';

page {
    font-size: 28rpx;
    background-color: #f1f4f8;
}

@each $key, $value in $color {
    .bg-color-#{$key} {
        background-color: $value;
    }
    .text-color-#{$key} {
        color: $value;
    }
}

@each $value in ('flex', 'block', 'inline-block', 'grid') {
    .#{$value} {
        display: $value;
    }
}

@each $value in ('wrap', 'wrap-reverse', 'nowrap') {
    .flex-#{$value} {
        flex-wrap: wrap;
    }
}

@each $key, $value in $flex-jc {
    .justify-#{$key} {
        justify-content: $key;
    }
}
@each $key, $value in $flex-ai {
    .items-#{$key} {
        align-items: $value;
    }
}

.flex-1 {
    flex: 1;
}

/* 文本溢出隐藏 */
.text-ellipsis {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
// 多行文本溢出隐藏
.text-line-ellipsis{
	display: -webkit-box;
	word-break: break-all;
	text-overflow: ellipsis;
	overflow: hidden;
	-webkit-box-orient: vertical;
}

@for $i from 2 through 8 {
    .text-multiline-#{$i} {
        -webkit-line-clamp: $i;
    }
}

/* 适配iphonex以上小横条 */
.safe-area-view-p{
	padding-bottom: constant(safe-area-inset-bottom);  
	padding-bottom: env(safe-area-inset-bottom);  
}
.safe-area-view-m{
	margin-bottom: constant(safe-area-inset-bottom);  
	margin-bottom: env(safe-area-inset-bottom);  
}

@each $value in ('left', 'center', 'right', 'justify') {
    .text-#{$value} {
        text-align: $value;
    }
}

@each $value in ('border-box', 'content-box') {
    .#{$value} {
        box-sizing: $value;
    }
}

@each $value in ('static', 'fixed', 'absolute', 'relative', 'sticky') {
    .#{$value} {
        position: $value;
    }
}

@for $i from 0 through 10 {
    .opacity-#{$i} {
        opacity: calc($i/10);
    }
    @if $i > 2 and $i < 8 {
        .text-weight-#{$i * 100} {
            font-weight: $i * 100;
        }
    }
}

@for $i from 0 through 48 {
    @if $i % 4 == 0 and $i > 2 {
        .round-#{calc($i / 2)} {
            border-radius: $i + $unit;
        }
    }
}

// 字体 10 - 36px
@for $i from 20 through 72 {
    @if $i % 4 == 0 {
        $name: calc($i / 2);
        .text-size-#{$name} {
            font-size: $i + $unit;
        }
    }

}

// 边距 1 - 30px
@for $i from 2 through 60 {
    @if $i % 2 == 0 {
        @each $value in ('margin', 'padding') {
            $name: calc($i / 2);
            .#{$value}-#{$name} {
                #{$value}: $i + $unit;
            }
        }
    }
}
// 单个边距 1 - 15px
@for $i from 2 through 30 {
    @if $i % 2 == 0 {
        @each $short, $long in (t: top, b: bottom, l: left, r: right) {
            $name: calc($i / 2); 
            .margin-#{$short}-#{$name} { 
                margin-#{$long}: $i + $unit;
            }
            .padding-#{$short}-#{$name} { 
                padding-#{$long}: $i + $unit;
            }
        }
    }
}